<template>
    <div class="container">
        <div class="lucky-wheel">
            <div class="lucky-title">
                <img src="../assets/img/lucky_title.png"  alt="">
<!--                <img  v-bind:src="activity_info.image_title" alt="">-->
            </div>
            <div class="roll-msg" v-show="list.length && activity_info.canDrawPrize">
<!--            <div class="roll-msg" v-show="true">-->
                <div class="popup">
                    <div class="box">
                        <ul class="lb" :class="{marquee_top:animate}">
                            <li v-for="(item, index) in win_list">{{item}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="wheel-main">
                <div class="wheel-pointer-box">
                    <div class="wheel-pointer" @click="rotate_handle()"
                         :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"></div>
                </div>
                <div class="wheel-bg" :style="{transform:rotate_angle,transition:rotate_transition}">
<!--                    <img v-bind:src="activity_info.image"  alt="">-->
                    <img src="../assets/img/b.png"  alt="">
                </div>
            </div>
        </div>
        <div class="main">
            <div class="main-bg" v-if="true"></div>
            <div class="bg-p"></div>
            <div class="content">
                <div class="lottery_ticket">今日抽奖次数： {{ lottery_ticket}}</div>
<!--                <div class="lottery_ticket">参与抽奖人数： {{ participateNumber}}</div>-->
                <div class="lottery_ticket">参与抽奖人次： {{ drawNumber}}</div>
            </div>
            <div class="winPrizeInfo tip" v-show="list.length && !activity_info.canDrawPrize">
                <span class="tip-title">中奖人列表</span>
                <ul class="tip-content">
                    <li v-for="(item, index) in win_list_down">
                        <span class="win_list_down">{{item}}</span>
                    </li>
                </ul>
            </div>
            <!--            我的中奖纪录-->
            <div class="userWineList tip" v-show="userWineInfo.length">
                <span class="tip-title">我的奖品</span>
                <ul class="tip-content">
                    <li v-for="(item, index) in userWineInfo" class="userWineInfo">
                        <span class="prize-index">{{parseInt(item.index) + 1}}</span>
                        <span class="prize-name">{{item.prize_name}}</span>
                        <!-- <span class="win-prize-time">{{formatTime(item.time)}}</span> -->
                    </li>
                </ul>
            </div>
            <div class="tip">
                <div class="tip-title">活动规则</div>
                <div class="tip-content rule" >{{activity_info.rules}}</div>
            </div>
            <div class="prizeList  tip" v-show="prize_list.length">
                <span class="tip-title">奖品列表</span>
                <ul class="tip-content">
                    <li v-for="(item, index) in prize_list" class="prize-list">
                        <span class="prize-index">{{index + 1}}</span>
                        <span class="prize-name">{{item.full_name}}</span>
                    </li>
                </ul>
            </div>


        </div>
        <div class="toast" v-show="toast_control">
            <div class="toast-container">
                <img :src="toast_pictrue" class="toast-picture">
                <div class="close" @click="close_toast()"></div>
                <div class="toast-title">
                    {{toast_title}}
                </div>
                <div class="toast-btn">
                    <div class="toast-cancel" @click="close_toast">关闭</div>
                </div>
            </div>
        </div>
        <div class="toast-mask" v-show="toast_control"></div>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                timer: null,
                animate: false,
                list: [],
                list2: [],
                easejoy_bean: 0, //金豆
                lottery_ticket: 0, //抽奖次数
                toast_pictrue: require("../assets/img/congratulation1.png"),
                //奖品列表
                prize_list: [],
                // 活动信息
                activity_info: {},
                // 中奖人中奖信息
                winInfo: [],
                // 我的奖品信息
                userWineInfo: [],
                // 参与人数
                participateNumber: 0,
                // 抽奖人次
                drawNumber: 0,
                user_id: 0,
                number: 0,
                toast_control: false, //抽奖结果弹出框控制器
                hasPrize: false, //是否中奖
                start_rotating_degree: 0, //初始旋转角度
                rotate_angle: 0, //将要旋转的角度
                start_rotating_degree_pointer: 0, //指针初始旋转角度
                rotate_angle_pointer: 0, //指针将要旋转的度数
                rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
                rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
                click_flag: false, //是否可以旋转抽奖
                i: 0, //测试使用,
                start_code: 1,
                end_code: 10000
            };
        },
        created() {
            this.init_prize_list();
        },
        mounted() {
            this.getData()
            this.scrollPrizeInfo()
        },
        watch: {
            'activity_info.canDrawPrize': 'scrollPrizeInfo' // 值可以为methods的方法名
        },
        computed: {
            toast_title() {
                return this.hasPrize
                    ? "恭喜您，获得" + this.prize_list[this.i].full_name
                    : "未中奖";
            },
            win_list() {
                if (this.list.length < this.winInfo.length) {
                    for (let i = 0; i < this.winInfo.length; i++) {
                        let phone = this.winInfo[i].phone
                        let reg = /^(\d{3})\d{4}(\d{4})$/;

                        phone = phone.replace(reg, "$2");
                        this.list.push(phone + "中" + this.winInfo[i].simple_name)
                    }
                }
                return this.list
            },
            win_list_down() {
                if (this.list2.length < this.winInfo.length) {
                    for (let i = 0; i < this.winInfo.length; i++) {
                        let phone = this.winInfo[i].phone
                        let reg = /^(\d{3})\d{4}(\d{4})$/;

                        phone = phone.replace(reg, "$2");
                        this.list2.push(phone + " " + this.winInfo[i].prize_name)
                    }
                }
                return this.list2
            },
            formatTime(){
                return function(time){
                    //console.log(time)
                    //console.log(this.formatDate(time))
                    return this.formatDate(time*1000)
                }
            }

        },
        methods: {
            formatDate(now) {
                let time = new Date(now);
                // console.log(Date.parse(new Date()));
                let y = time.getFullYear();
                let m = time.getMonth()+1;
                let d = time.getDate();
                let h = time.getHours();
                let mm = time.getMinutes();
                let s = time.getSeconds();
                return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
            },

            add0(m){return m<10?'0'+m:m },

            getData() {
                let user_id = this.GetQueryString("user_id") ? this.GetQueryString("user_id") : this.GetQueryString("userId");
                if (user_id == null || user_id.length <= 0) {
                    // alert("User ID 不能为空")
                    return
                } else {
                    this.user_id = user_id
                }
                // alert(user_id)
                axios.get('http://app.deweiyi.com/app/BigWheel/wheelData', {
                // axios.get('http://localhost/app/BigWheel/wheelData', {
                    params: {
                        "user_id": user_id
                    }
                }).then((res) => {
                    // console.log(JSON.parse(res))
                    // console.log(res.data)
                    if (res.data && res.data.code === 1) {
                        this.prize_list = res.data.data.prizesInfo
                        this.activity_info = res.data.data.activityInfo
                        this.winInfo = res.data.data.winInfo
                        this.userWineInfo = res.data.data.userWineInfo
                        this.number = res.data.data.prizesInfo.length
                        this.lottery_ticket = res.data.data.count
                        this.participateNumber = res.data.data.participateNumber
                        this.drawNumber = res.data.data.drawNumber
                        this.click_flag = true
                    }else if(res.data && res.data.code === 0){
                        this.activity_info.rules = res.data.message
                    }
                    // console.log(this.prize_list)

                })
            },

            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return null;
            },
            //此方法为处理奖品数据
            init_prize_list(list) {
            },

            rotate_handle() {
                if (this.lottery_ticket > 0) {
                    if (!this.click_flag) return;
                    // 获取抽奖概率 1-10000
                    // let random = Math.floor(Math.random() * 10000 + 1);
                    let random = this.randomCode(Number(this.activity_info.start_code),Number(this.activity_info.end_code));
                    console.log(random, Number(this.activity_info.start_code), Number(this.activity_info.end_code))
                    let index = -1
                    for (let i = 0; i < this.number; i++) {
                        if (random >= this.prize_list[i].start_code && random <= this.prize_list[i].end_code) {
                            index = i
                            break;
                        }
                    }

                    this.rotating(index);
                    this.lottery_ticket = this.lottery_ticket - 1
                } else {
                    // alert('无抽奖次数')
                }

                // this.i = this.i + 2;
            },

            randomCode(lower, upper) {
                return Math.floor(Math.random() * (upper - lower+1)) + lower;
            },

            getResultAngle(num, piece) {
                let arr = []
                for (let i = 0; i < num; i++) {
                    arr.unshift(piece / 2 + piece * i)
                }
                return arr
            },
            rotating(index) {

                var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
                var during_time = 5; // 默认为1s
                var random = Math.floor(Math.random() * this.number);
                // var result_index = index || random; // 最终要旋转到哪一块，对应prize_list的下标
                var result_index = index;
                this.i = result_index;
                // console.log(this.i);
                // var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5];
                let result_angle = [];
                let num = this.number;
                let piece = 360 / num;

                result_angle = this.getResultAngle(num, piece)
                //最终会旋转到下标的位置所需要的度数
                var rand_circle = 6; // 附加多转几圈，2-3
                this.click_flag = false; // 旋转结束前，不允许再次触发
                if (type === 0) {
                    // 转动盘子
                    var rotate_angle =
                        this.start_rotating_degree +
                        rand_circle * 360 +
                        result_angle[result_index] -
                        this.start_rotating_degree % 360;
                    this.start_rotating_degree = rotate_angle;
                    this.rotate_angle = "rotate(" + rotate_angle + "deg)";
                    // // //转动指针
                    // this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
                    // this.start_rotating_degree_pointer =360*rand_circle;
                    var that = this;
                    // 旋转结束后，允许再次触发
                    setTimeout(function () {
                        // that.click_flag = true;
                        that.game_over(this.i);
                    }, during_time * 1000 + 1500); // 延时，保证转盘转完
                } else {
                    //
                }
            },

            game_over() {
                this.toast_control = true;
                this.click_flag = true;
                this.hasPrize = this.prize_list[this.i].is_prize
                // todo 记录获奖用户及奖品
                this.winRecord(this.user_id, this.activity_info.id, this.prize_list[this.i].id, this.prize_list[this.i].full_name,
                    this.prize_list[this.i].index,this.prize_list[this.i].name)
                // todo 更新本地用户中奖纪录(头部)
                this.list.unshift("喜" + "中" + this.prize_list[this.i].name)
                // todo 更新本地用户中奖纪录(底部)
                let currentWinPrizeRecord = {}
                currentWinPrizeRecord.index = this.prize_list[this.i].index
                currentWinPrizeRecord.prize_name = this.prize_list[this.i].full_name
                currentWinPrizeRecord.time = Date.parse(new Date()) / 1000;
                // console.log(currentWinPrizeRecord)
                this.userWineInfo.unshift(currentWinPrizeRecord)
                this.drawNumber++;
            },

            winRecord(user_id, activity_id, prize_id, prize_name, index, simple_name) {
                axios.post('http://app.deweiyi.com/app/BigWheel/winRecord', {
                    params: {
                        "user_id": user_id,
                        "activity_id": activity_id,
                        "prize_id": prize_id,
                        "prize_name": prize_name,
                        "index": index,
                        "simple_name": simple_name
                    }
                }, {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'} //加上这个
                }).then((res) => {
                    // console.log(res.data)
                })
            },
            //关闭弹窗
            close_toast() {
                this.toast_control = false;
            },
            scrollPrizeInfo() {
                // console.log('scrollPrizeInfo', this.activity_info.canDrawPrize)
                let that = this;

                if(this.activity_info.canDrawPrize){
                   this.timer  = setInterval(() => {
                        this.animate = true;

                        setTimeout(() => {
                            this.list.push(this.list[0]);
                            this.list.shift();
                            this.animate = false;
                            // console.log(Math.random());
                            // console.log(this.list)
                        }, 500);
                    }, 3000);
                    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
                    this.$once("hook:beforeDestroy", () => {
                        clearInterval(this.timer);
                    });
                }else{
                    // console.log('clear', this.timer);
                    clearInterval(this.timer);
                }

            }
        }
    };
</script>

<style lang="less" scoped>
    .win_list_down {
        font-size: 14px
    }
    /*我的奖品*/
    .userWineInfo{
        display: flex;
        flex-direction: row;
    }
    .userWineInfo > .prize-name{
        width: 240px;
    }

    .win-prize-time{
        width: 140px;
    }

    /*奖品列表*/
    .prize-list{
        display: flex;
        flex-direction: row;
     }
    .prize-index{
        width: 20px;
    }
    .prize-list > .prize-name{
        width: 270px;
        font-size: 0.8rem;
    }
    /*滚动栏*/
    .marquee {
        width: 100%;
        height: 3.125rem;
        align-items: center;
        color: #3a3a3a;
        background-color: #b3effe;
        display: flex;
        box-sizing: border-box;
    }

    .marquee_title {
        padding: 0 20px;
        height: 1.875rem;
        font-size: 14px;
        border-right: 1px solid #d8d8d8;
        align-items: center;
    }

    .marquee_box {
        display: block;
        position: relative;
        width: 60%;
        /*height: 30px-1.875rem; 35-2.1875*/
        height: 30px;
        overflow: hidden;
    }

    .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    .marquee_top {
        transition: all 0.5s;
        margin-top: -30px;
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        padding-left: 20px;
    }

    .marquee_list li span {
        padding: 0 2px;
    }

    .red {
        color: #ff0101;
    }

    .roll-msg {
        z-index: 99;
        /*background-color: #b3effe;*/
        position: absolute;
        /*top: 0.4rem;    230 * 32 */
        top: 8.5rem;
        left: 4.53rem;
        width: 14.375rem; // 230  23.4375 - 14.375
        /*height: 50px;*/
        height: 2rem;
        display: flex;
        justify-content: center;
        font-size: 16px;
        background-size:cover;
        overflow: hidden;
        background: url("../assets/img/lucky_pop.png") no-repeat center;
        background-size:100% 99.9%;
        .popup {
            // 225 * 30
            z-index: 999;
            border-radius: 20px;
            width: 60%;
            height: 1.875rem;
            min-width: 10.525rem;
            align-items: center;
            color: #e3006c;
            font-size: 0.9rem;
            /*background-color: rgb(10, 10, 10, 0.1);*/
            /*opacity: 0.7;*/
            display: flex;
            box-sizing: border-box;

            .box {
                display: block;
                position: relative;
                padding: 0 .3rem;
                width: 100%;
                height: 1.875rem;
                overflow: hidden;

                .lb {
                    width: 100%;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;

                    li {
                        display: flex;
                        justify-content: center;
                        margin-top: 0.25rem;
                    }
                }
            }
        }
    }

    /*bigwheel*/
    .container {
        width: 100%;
    }
    .rule{
        white-space: pre-line;
        /*white-space:pre-wrap;*/
        /*white-space:normal;*/
        /*white-space:pre;*/
        padding-top: 0;
    }

    .lucky-wheel {
        width: 100%;
        height: 33.5625rem;  // 505
        background: rgb(254, 246, 210) url("../assets/img/color_pillar.png") no-repeat center bottom;
        /*background: #fff2ce url("../assets/img/color_pillar.png") no-repeat center bottom;*/
        background-size: 100%;
        padding-top: 0.3rem;
        /*padding-top: 1.5625rem;*/
    }

    /*标题文字*/
    .lucky-title > img{
        width: 100%;
        height: 8.125rem;
        background-size: 100%;
    }
    /*中奖信息轮播*/

    /*大转盘*/
    .wheel-main {
        margin-top: 2.0625rem;  // 33px
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 99;
    }

    .wheel-bg > img{
        width: 22rem;
        height: 22rem;
        background-size: 100%;
        color: #fff;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        transition: transform 3s ease;
    }

    .wheel-pointer-box {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 100;
        transform: translate(-50%, -60%);
        width: 5.3125rem;
        height: 5.3125rem;
    }

    .wheel-pointer {
        /*85px / 16 */
        width: 5.3125rem;
        height: 5.3125rem;
        background: url("../assets/img/draw_btn.png") no-repeat center top;
        background-size: 100%;
        transform-origin: center 60%;
    }

    .wheel-bg div {
        text-align: center;
    }

    .prize-list {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .prize-list .prize-item {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }


    .prize-item {
        width: 5.875rem;
        height: 9rem;
    }

    .prize-pic img {
        width: 4.0625rem;
        height: 2.5rem;
        margin-top: 1.5625rem;
    }

    .prize-count {
        font-size: 16px;
    }

    .prize-type {
        font-size: 16px;
    }

    .main {
        margin-top: 4rem;
        position: relative;
        width: 100%;
        min-height: 14.25rem;
        background: #f69377;
        /*background: rgb(243, 109, 86);*/
        padding-bottom: 1.6875rem;
    }

    .main-bg {
        width: 100%;
        height: 5.5625rem; // 105px
        position: absolute;
        top: -4rem;      // 55px
        left: 0;
        // rgb(252, 207, 133)
        //  no-repeat center top
        background: #ffd55d3d url("../assets/img/luck_bg.png");
        // background-image:  url("../assets/img/luck_bg.png") , linear-gradient(#fdeeb8, #ff925d);
        background-blend-mode: screen;
        background-size: cover;
        /*background-size: 100%;*/
    }



    .bg-p {
        width: 100%;
        height: 2.95rem;
        background: #f69377;
        /*background: rgb(252, 207, 133);*/
    }

    .content {
        position: absolute;
        top: -0.33rem;
        left: 0;
        /*background: rgb(243, 109, 86);*/
        background: #f69377;
        width: 100%;
        height: 5.1875rem;
        font-size: 1.125rem;
        color: #ffeb39;
        padding-left: 6.75rem;
    }

    .content div {
        text-align: left;
    }

    .tip {
        position: relative;
        margin: 2.5rem auto 0;
        width: 17.5rem;
        border: 1px solid #fbc27f;
    }

    .tip-title {
        position: absolute;
        top: -1rem;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 1rem;
        color: #ffeb39;
        /*background: rgb(243, 109, 86);*/
        background: #f69377;
        padding: 0.3125rem 0.625rem;
    }

    .tip-content {
        padding: 1.5625rem 0.625rem;
        font-size: 0.875rem;
        color: #fff8c5;
        line-height: 1.5;
    }

    .toast-mask {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
        width: 100%;
        height: 100%;
    }

    .toast {
        position: fixed;
        top: 50%;
        left: 11.8rem;
        z-index: 20000;
        transform: translate(-50%, -50%);
        width: 15.4375rem; // 375 - 247 = 128 / 2 = 64 / 16 = 4
        border-radius: 0.3125rem;
        padding: 0.3125rem;
        background-color: rgb(252, 244, 224);
    }

    .toast-container {
        position: relative;
        width: 100%;
        height: 100%;
        border: 1px dotted #fccc6e;
    }

    .toast-picture {
        position: absolute;
        top: -6.5rem;
        left: -1.5rem;
        width: 18.75rem;
        height: 8.5625rem;
    }

    .toast-pictrue-change {
        position: absolute;
        top: -1.5rem;
        left: -1.375rem;
        width: 17.5rem;
        height: 3.125rem;
    }

    .toast-title {
        padding: 2.8125rem 0;
        font-size: 18px;
        color: #fc7939;
        text-align: center;
    }

    .toast-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.9375rem;
    }

    .toast-btn div {
        background-image: -moz-linear-gradient(-18deg,
        rgb(242, 148, 85) 0%,
        rgb(252, 124, 88) 51%,
        rgb(252, 124, 88) 99%);

        background-image: -ms-linear-gradient(-18deg,
        rgb(242, 148, 85) 0%,
        rgb(252, 124, 88) 51%,
        rgb(252, 124, 88) 99%);
        background-image: -webkit-linear-gradient(-18deg,
        rgb(242, 148, 85) 0%,
        rgb(252, 124, 88) 51%,
        rgb(252, 124, 88) 99%);
        box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
        width: 4.6875rem;
        height: 1.875rem;
        border-radius: 1.875rem;
        text-align: center;
        line-height: 1.875rem;
        color: #fff;
    }

    .close {
        position: absolute;
        top: -0.9375rem;
        right: -0.9375rem;
        width: 2rem;
        height: 2rem;
        background: url("../assets/img/close_store.png") no-repeat center top;
        background-size: 100%;
    }


</style>
